<route>
{
    meta: {
        title: "修改用户信息"
    }
}
</route>

<script setup name="manageExampleEdit">
import useUserStore from '@/store/modules/user'
import useUserGroupStore from '@/store/modules/userGroup'

const route = useRoute()
const router = useRouter()
const groupStore = useUserGroupStore()
const groupList = ref([])

const userStore = useUserStore()

const formRef = ref()
const form = ref({
    name: route.query.name,
    username: route.query.username,
    role: route.query.role,
    groupId: JSON.parse(route.query.group).id
})

const rules = ref({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入新用户名', trigger: 'blur' }
    ]
})

onMounted(() => {
    groupStore.getGroup().then(res => {
        handleTop(res)
    })
})

function handleTop(obj) {
    obj.forEach(item => {
        groupList.value.push({ id: item.id, name: item.name })
        if(item.children.length) {
            handleTop(item.children)
        }
    })
}

// async function getUser() {

// }

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
            const params = toRaw(form.value)
            if (params.role == '') {
                params.role = null
            }
            userStore.editAccout(Object.assign(params, { id: route.query.id })).then(() => {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                router.push({
                    name: 'ComponentExampleManage'
                })
            }).catch(() => {})

        }
    })
}
</script>

<template>
    <div>
        <page-header title="修改用户信息" content="" />
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="form.username" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="角色" prop="role">
                            <el-radio-group v-model="form.role">
                                <el-radio label="ADMIN">管理员</el-radio>
                                <el-radio label="">用户</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="角色组" prop="groupId">
                            <el-select v-model="form.groupId" placeholder="请选择角色组">
                                <el-option v-for="item in groupList" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
        </fixed-action-bar>
    </div>
</template>
